<template>
  <div class="card flex items-center gap-6">
    <div class="w-20 h-20 rounded-full bg-gradient-ai flex items-center justify-center text-3xl text-white font-bold overflow-hidden cursor-pointer" @click="goUserPage">
      <img v-if="user?.avatar" :src="user.avatar" alt="头像" class="w-full h-full object-cover" />
      <span v-else>{{ user?.name?.[0] || 'U' }}</span>
    </div>
    <div class="flex-1">
      <div class="flex items-center gap-3">
        <div class="text-2xl font-bold text-text-primary cursor-pointer" @click="goUserPage">{{ user?.name || '未知用户' }}</div>
        <span v-if="user?.isAi && showAiLabel" class="ai-badge">AI</span>
      </div>
      <div class="text-text-secondary mt-2">{{ user?.bio || '这个用户很神秘，没有留下任何介绍...' }}</div>
      <div class="flex items-center gap-6 mt-4 text-sm text-text-secondary">
        <div class="flex items-center gap-1">
          <span class="font-medium text-text-primary">{{ user?.followers || 0 }}</span>
          <span>关注者</span>
        </div>
        <div class="flex items-center gap-1">
          <span class="font-medium text-text-primary">{{ user?.following || 0 }}</span>
          <span>正在关注</span>
        </div>
        <div class="flex items-center gap-1">
          <span class="font-medium text-text-primary">{{ user?.uploads || 0 }}</span>
          <span>上传</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useUserStore } from '../../store/useUserStore'
import { useUserData } from '../../composables/useUserData'
import type { User } from '../../types/ui'
// 移除未使用的导入
import { useUiStore } from '../../store/useUiStore'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const { user: currentAuthUser, isAuthenticated } = storeToRefs(userStore)
const { getUserProfile } = useUserData()
const user = ref<User | null>(null)
const uiStore = useUiStore()
const showAiLabel = computed(() => uiStore.showAiLabel)

// 计算属性：判断是否为当前用户
const isCurrentUser = computed(() => {
  if (!isAuthenticated.value || !currentAuthUser.value) return false
  const currentUserId = currentAuthUser.value.id
  const pageUserId = route.params.id as string
  return currentUserId === pageUserId
})

const goUserPage = () => {
  // 如果点击的是当前用户的头像，不需要跳转
  // 如果点击的是其他用户的头像，跳转到对应用户页面
  if (!isCurrentUser.value && user.value) {
    router.push({ name: 'UserProfile', params: { id: user.value.id } })
  }
}

const loadUserInfo = async (userId: string) => {
  // 从数据库获取真实用户信息
  const userProfile = await getUserProfile(userId)
  
  if (userProfile) {
    user.value = userProfile
  } else {
    // 如果数据库中没有用户资料，使用默认信息
    user.value = {
      id: userId,
      name: '未知用户',
      avatar: undefined,
      bio: '这个用户很神秘，没有留下任何介绍...',
      isAi: false,
      followers: 0,
      following: 0,
      uploads: 0,
      createdAt: '2024-01-01T00:00:00Z'
    }
  }
}

// 监听路由参数变化
watch(() => route.params.id, async (newUserId) => {
  if (newUserId) {
    await loadUserInfo(newUserId as string)
  }
}, { immediate: true })

onMounted(async () => {
  const userId = route.params.id as string
  if (userId) {
    await loadUserInfo(userId)
  }
})
</script>